---
type: tutorial
title: Стилизуйте страницу "О сайте"
description: |-
  Учебное пособие: Создайте свой первый блог на Astro —
  Добавьте тег стиля Astro, чтобы создать на странице единую стилистику
  Добавьте тег стиля Astro для оформления страницы с областью действия стилей
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Теперь, когда у вас есть страница "О сайте" с информацией о вас, пришло время ее оформить!

<PreCheck>
  - Стилизовать элементы на одной странице
  - Использовать переменные CSS
</PreCheck>


## Оформление отдельной страницы

Используя собственные теги `<style></style>` Astro, вы можете придать стиль элементам на вашей странице. Добавление **атрибутов** и **директив** к этим тегам дает вам еще больше возможностей для стилизации.

<Steps>
1. Скопируйте следующий код и вставьте его в файл `src/pages/about.astro`:

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 

    ```

     Проверьте все три страницы в предварительном просмотре браузера.
    
    - Какого цвета заголовок страницы на:

        - Главной странице?  <Spoiler>черный</Spoiler>
        - Странице "О сайте"? <Spoiler>пурпурный</Spoiler>
        - Странице блога? <Spoiler>черный</Spoiler>

    - Страница с самым большим текстом заголовка? <Spoiler>Страница "О сайте"</Spoiler>

    :::tip
    Если вы не можете определить цвета визуально, вы можете использовать инструменты разработчика в вашем браузере, чтобы осмотреть элементы заголовка `<h1>` и проверить примененный цвет текста.
    :::

2. Добавьте класс `skill` к сгенерированным элементам `<li>` на странице "О сайте", чтобы их можно было стилизовать. Теперь ваш код должен выглядеть следующим образом:

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>My skills are:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. Добавьте следующий код в ваш существующий тег стиля:

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```



4. Снова зайдите на страницу "О сайте" в браузере и проверьте визуально или с помощью инструментов разработчика, что каждый пункт в списке ваших навыков теперь зеленый и жирный.
</Steps>

## Используйте свою первую переменную CSS

Тег Astro `<style>` также может ссылаться на любые переменные из вашего скрипта frontmatter с помощью директивы `define:vars={ {...} }`. Вы можете **определить переменные внутри вашего кодового забора**, а затем **использовать их в качестве переменных CSS в теге стиля**.

<Steps>
1. Определите переменную `skillColor`, добавив ее в скрипт frontmatter в файле `src/pages/about.astro`, как показано ниже:

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "About Me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Technical Writer",
      hobbies: ["photography", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "navy";
    ---
    ```

2. Обновите ваш уже существующий тег `<style>` внизу, чтобы сначала определить, а затем использовать эту переменную `skillColor` внутри двойных фигурных скобок.

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. Проверьте страницу "О сайте" в предварительном просмотре браузера. Вы должны увидеть, что навыки теперь темно-синие, как установлено переменной `skillColor`, переданной в директиве `define:vars`.
</Steps>

<Box icon="puzzle-piece">

## Попробуйте сами - Определите переменные CSS
 
 <Steps>
 1. Обновите тег `<style>` на странице "О сайте" так, чтобы он соответствовал приведенному ниже. 

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```
 
 2. Добавьте все недостающие определения переменных в свой скрипт frontmatter, чтобы ваш новый тег `<style>` успешно применил эти стили к списку навыков:
    - Цвет текста - темно-синий
    - Текст выделен жирным шрифтом
    - Элементы списка выделены заглавными буквами (все буквы прописные)
</Steps>

<details>
<summary>✅ Покажите мне код! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>



<Box icon="check-list">
## Чек-лист

<Checklist>
- [ ] Я могу добавлять стили CSS на отдельную страницу с помощью тега Astro `<style>`.
- [ ] Я могу использовать переменные для стилизации элементов на странице.
</Checklist>
</Box>

### Ресурсы
- [Сравнение синтаксиса Astro и JSX](/ru/basics/astro-syntax/#отличия-между-astro-и-jsx)

- [Тег `<style>` в Astro](/ru/guides/styling/#styling-in-astro)

- [CSS переменные в Astro](/ru/guides/styling/#css-variables)